<template>
	<view class="small-card">
		<image class="card-cover" :src="cardDetail.cover_image" mode="scaleToFill"></image>

		<view class="card-title">{{ cardDetail.title }}</view>
		<view class="card-subtitle">{{ cardDetail.type }}</view>
	</view>
</template>

<script setup>
	defineProps({
		cardDetail: Object
	});
</script>

<style lang="scss">
	.small-card {
		width: 100%;

		.card-cover {
			width: 100%;
			height: 200rpx;
			border-radius: 10rpx;
		}

		.card-title {
			font-size: 24rpx;
			color: #000000;
			font-weight: 500;
			margin-top: 15rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.card-subtitle {
			font-size: 22rpx;
			color: #999999;
			font-weight: 500;
			margin-top: 15rpx;
		}
	}
</style>
